<template>
	<view class="classify">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'分类'"></Hearder>
		<!-- #endif -->
		<u-transition :show="show">
			<view class="content clearfix">
				<view class="box_left">
					<view :class="choosenumber == -1?'active':''" @click="tabindex(-1,0)">
						全部商品
					</view>
					<view v-for="(item,index) in categoryList" :key="item.category_id" 
					:class="choosenumber == index?'active':''" @click="tabindex(index,item.category_id)">
						{{item.name}}
					</view>
				</view>
				<view class="box_right clearfix">
					<scroll-view class="detail_box" scroll-y="true" @scrolltolower="scrolltolower">
						<view style="width: 96.5%;" v-if="loading">
							<view class="box_list clearfix" v-for="item in 10">
								<u-skeleton
									rows="1"
									:title="false"
									:rowsHeight="['208rpx']"
									:rowsWidth="['208rpx']"
									:loading="loading"
									animate
								></u-skeleton>
								<view class="box_sml">
									<view class="title">
										<u-skeleton
											rows="3"
											:title="false"
											:rowsHeight="['50rpx','50rpx','50rpx']"
											:rowsWidth="['100%','30%','100%']"
											:loading="loading"
											animate
										></u-skeleton>
									</view>
								</view>
							</view>
						</view>
						<view style="width: 96.5%;" v-if="!loading">
							<view class="box_list clearfix" v-for="item in goodlist" :key="item.goods_id" @click="toPage('/pages/classify/goodsdet?id='+item.goods_id)">
								<u-transition :show="show">
									<image :src="item.goods_image" class="box_image"></image>
								</u-transition>
								<view class="box_sml">
									<view class="title">{{item.goods_name}}</view>
									<view class="box_bottom">
										<view v-if="category_id!=1">￥{{item.goods_min_line_price}}</view>
										<view v-if="category_id==1"></view>
										<view>
											<view v-if="category_id!=1">￥{{item.goods_min_price}}</view>
											<view v-if="category_id==1">{{item.goods_min_price}}积分</view>
											<view>{{item.goods_sales}}人付款</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 底部加载提示 -->
						<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
					</scroll-view>
					<view class="nidata" v-if="goodlist.length == 0 && !loading">
						<image src="../../static/images/noimg.png" style="margin-top: 500rpx;"></image>
					</view>
				</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				categoryList:[],
				choosenumber:-1,
				category_id:0,
				page:1,
				last_page:1,
				goodlist:[],
				loadMoreText: "加载中...",
				showLoadMore: false,
				loading: true,
				show: true,
				max: 0,
			}
		},
		onLoad() {
			this.getCategoryAll()
		},
		onUnload() {
			this.max = 0,
			this.goodlist = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
		},
		methods:{
			// 获取分类列表
			getCategoryAll(){
				this.request('/goods/getCategoryAll',{type:1,data_type:1}).then(res=>{
					if(res.data.code == 1){
						this.categoryList = res.data.data.categoryList
						this.getinit()
					}
				})
			},
			getinit(){
				this.request('/goods/getCategoryGoodsList',{category_id:this.category_id,page:this.page}).then(res => {
					if(res.data.code==1){
						this.goodlist=this.goodlist.concat(res.data.data.data)
						this.last_page=res.data.data.last_page
					}
					this.loading = false;
				})
			},
			scrolltolower(){
				this.page = this.page + 1
				if (this.page > this.last_page) {
					this.loadMoreText = "没有更多数据了!"
					return;
				}
				this.showLoadMore = true;
				this.getinit()
			},
			tabindex(index,category_id){
				this.choosenumber=index
				this.category_id=category_id
				this.page=1
				this.goodlist=[]
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
				this.loading = true;
				this.getinit()
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.classify{
		overflow: hidden;
		height: 100%;
		.content{
			height: 100%;
			.box_left{
				float: left;
				overflow-y: auto;
				width: 188rpx;
				height: 100%;
				text-align: center;
				background: #F8F8F8;
				&::-webkit-scrollbar{
				  display:none;
				}
				view{
					position: relative;
					padding: 46rpx 0;
					line-height: 34rpx;
					text-align: center;
					&.active{
						font-weight: 800;
						background: #fff;
					}
				}
			}
			.box_right{
				float: left;
				width: calc(100% - 190rpx);
				height: 100%;
				.detail_box{
					width:  calc(100% + 20rpx);
					height: 100%
				}
				.box_list{
					margin: 30rpx 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
					&:last-of-type{
						margin-bottom: 30rpx;
					}
					.box_image{
						float: left;
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
					.box_sml{
						float: left;
						width: calc(100% - 218rpx);
						height: 200rpx;
						border-bottom: $uni-border-bottom;
						padding-bottom: 30rpx;
						margin-left: 18rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.title{
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp:2;
							/*! autoprefixer: off */
							-webkit-box-orient: vertical;
							/* autoprefixer: on */
							line-height: 36rpx;
							font-size: 28rpx;
							margin-top: 10rpx;
						}
						.box_bottom{
							view{
								font-size: 22rpx;
								color: #999;
							}
							>view{
								&:first-of-type{
									text-decoration: line-through;
								}
								&:last-of-type{
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 6rpx;
									view{
										&:first-of-type{
											color: $uni-text-color;
											font-size: 30rpx;
											font-weight: 800;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
